<template>
      <div class="mui-numbox">
              <button class="mui-btn mui-btn-numbox-minus" type="button" @click="onReduce" :disabled="isDisabledSub">-</button>
              <input class="mui-input-numbox" type="number" value="5" v-model="strVal" @keyup.enter="onEnter" disabled="disabled" @on-blur="onBlur">
              <button class="mui-btn mui-btn-numbox-plus" type="button" @click="onIncrease" :disabled="isDisabledAdd">+</button>
      </div>
</template>

<script>
    export default {
        props: {
            isDisabled: {
                type: Boolean,
                default: false
            },
            curVal: {
                type: Number,
                default: 50
            },
            minVal: {
                type: Number,
                default: 50
            },
            maxVal: {
                type: Number,
                default: 100
            },
            id:{
               type: Number,
               default: 100 
            }
        },
        data() {
            return {
                strVal: this.curVal,
                isDisabledAdd:false,
                isDisabledSub:false,


            }
        },
        methods: {
            onEnter() {
                if(Number(this.strVal) <= this.minVal) {
                    this.strVal = this.minVal;
                    this.isDisabledSub=true;
                }
                if(Number(this.strVal) >= this.maxVal) {
                    this.strVal = this.maxVal;
                    this.isDisabledAdd=true;
                }
               // this.$emit("getNumber", this.strVal);
            },
            onBlur() {
                this.nextTick(() => {
                    this.onEnter();
                });
            },
             onReduce() {
                if(Number(this.strVal) > this.minVal) {
                    this.strVal = Number(this.strVal);
                    this.strVal -=1;
                   // this.$emit("getNumber", this.strVal);
                    this.isDisabledAdd=false;
                }else{
                  this.strVal =this.minVal;
                  this.isDisabledSub=true;
                }
                 this.$store.commit('changCarCount',{id:this.id,num:-1})
            },
            onIncrease() {
                if(Number(this.strVal) < this.maxVal) {
                    this.strVal = Number(this.strVal);
                    this.strVal += 1;
                    //this.$emit("getNumber",  this.strVal);
                     this.isDisabledSub=false;
                }else{
                   this.strVal =this.maxVal;
                  this.isDisabledAdd=true;
                }
                this.$store.commit('changCarCount',{id:this.id,num:1})
            },
            resetCurVal(val) {
                this.strVal = val.toString();
                this.numVal = val;
              // this.$emit("getNumber", this.numVal);
            },
        }
    }
</script>

<style lang="less" scoped>
     .box-disable {
        pointer-events: none;
        color: #686868 !important;
    }
    .mui-numbox{
        height: 25px;

    }
</style>